
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>儿童故事生成器 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>儿童故事生成器 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">这个交互式故事生成器的核心目标和目标用户群体是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">核心目标是为6-12岁的儿童创建一款交互式奇幻故事生成器。它能根据用户输入的动物和颜色，生成一个采用卡通/动漫风格的响应式网页故事，旨在激发儿童的想象力和参与感。</div>
          </div>
          <div class="card-source">来源: 文档开篇段落及「提示词」部分的「角色 (Role)」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">如果在生成故事时用户没有提供任何输入，系统会使用什么默认值？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">如果用户未提供具体输入，系统将默认使用“龙”作为喜欢的动物，“紫色”作为喜欢的颜色来生成故事。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「任务 (Task)」-「输入处理」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">生成的故事是如何进行结构化展示的？用户如何与故事互动？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">故事被分为8-10个段落，每个段落约70字，独立展示在一个宽卡片上。用户通过点击“下一页”或“上一页”按钮来切换卡片，并且底部会有一个进度条显示当前阅读位置。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「任务 (Task)」-「故事要求」和「交互功能」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中对响应式设计规定了哪三个设备断点，以及在这些断点下卡片宽度有何不同？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档规定了三个断点：1. 手机（<600px），卡片宽度为90%；2. 平板（600px-1024px），卡片宽度为80%；3. 电脑（>1024px），卡片宽度固定为600px。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「任务 (Task)」-「响应式设计」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">该提示词如何应用福格行为模型(B=MAT)中的“动机(Motivation)”来吸引儿童？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过采用卡通风格的宽卡片、在卡片顶部加入用户所选动物的CSS动画以及融入个性化元素（动物和颜色），来激发孩子们阅读故事的兴趣和动机。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「任务 (Task)」-「行为触发（基于福格行为模型B=MAT）」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在生成HTML文件时，关于外部资源的使用有什么关键的约束？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">一个关键约束是生成的HTML文件不能使用任何外部资源，例如CDN链接或外部图片。所有的内容，包括动物的动画效果，都必须通过内联的CSS和JavaScript实现。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「格式 (Format)」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">除了故事内容本身，页面还需要包含哪些趣味性和交互性的设计元素？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">页面需要包含卡通化的圆形或异形按钮（带悬停动画）、动态更新的进度条（带圆点或星星装饰），以及在每个卡片顶部使用CSS实现的动物跳跃或闪烁动画。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「任务 (Task)」-「卡通/动漫风格与趣味性」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">模式</div>
          <div class="card-question">文档对生成页面的整体视觉风格（特别是背景和卡片设计）有哪些具体要求？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">模式</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">整体应为动漫风格，背景使用基于用户输入颜色的柔和渐变色。卡片设计为卡通风格，包含圆润的边角、阴影和装饰（如星星、云朵边框），并采用卡通字体（如Comic Sans）。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「任务 (Task)」-「卡通/动漫风格与趣味性」小节</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">根据文档要求，最终的交付成果应该是什么格式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">最终成果应是一个完整的、独立的HTML文件。该文件需包含全部的故事内容、CSS样式和JavaScript交互脚本，并且整个HTML代码需要被包裹在Markdown代码块中进行输出。</div>
          </div>
          <div class="card-source">来源: 文档「提示词」部分的「格式 (Format)」小节</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
